import { useEffect, useState } from 'react'
import { Tabs } from 'antd';
import style from "./create.module.css";
import CreateTab1 from "./CreateTab/createTab1/CreateTab1";
import CreateTab2 from "./CreateTab/createTab2/CreateTab2";
import CreateTab3 from "./CreateTab/createTab3/CreateTab3";
import ModuleTab1 from "./moduleTab/ModuleTab1";
import { Modal } from 'antd';
import { favoriterimg3 } from "/src/compoents/Libs";
import { tabitem1, tabitem2, tabitem3 } from "../../compoents/Libs";
import BottomRight from "../../compoents/commont/BottomRight";
import { useNavigate } from "react-router-dom";
function Index() {
  //
  const navigate = useNavigate()
  const [activeKey, setActiveKey] = useState("0");
  //弹框
  const [isModalOpen, setIsModalOpen] = useState(false);
  //输入框1
  const [value, setValue] = useState('')
  const [value1, setValue1] = useState('')
  const [bool, setBool] = useState(false)
  const [disabled, setDisabled] = useState(false)

  const huan = (e: any) => {
    setValue(e.target.value)
  }

  const huan1 = (e: any) => {
    setValue1(e.target.value)
  }

  useEffect(() => {
    if (value == '' && value1 == '') {
      setDisabled(true)
      setBool(false)
    }
    else {
      if (Number(value) < 40 || Number(value1) < 100) {
        setDisabled(true)
        setBool(true)
      }
      else {
        setDisabled(false)
        setBool(false)
      }
    }
  })


  const onChange = (key: string) => {
    console.log(key);
    setActiveKey(key)
  };

  interface TabsProps {
    key: string,
    label: string,
    contant: JSX.Element
  }

  const items: TabsProps[] = [
    {
      key: '0',
      label: '全部',
      contant: <CreateTab1 />,
    },
    {
      key: '1',
      label: '智能设计',
      contant: <CreateTab2 />,
    },
    {
      key: '2',
      label: '海报',
      contant: <CreateTab3 />,
    },
    {
      key: '3',
      label: '公众号',
      contant: <CreateTab1 />,
    },
    {
      key: '4',
      label: '抖音/小红书',
      contant: <CreateTab2 />,
    },
    {
      key: '5',
      label: '电商',
      contant: <CreateTab3 />,
    },
    {
      key: '6',
      label: 'PPT/办公',
      contant: <CreateTab1 />,
    },
    {
      key: '7',
      label: '印刷物料',
      contant: <CreateTab2 />,
    },
    {
      key: '8',
      label: 'H5',
      contant: <CreateTab3 />,
    },
    {
      key: '9',
      label: '社交生活',
      contant: <CreateTab1 />,
    },
    {
      key: '10',
      label: '视频',
      contant: <CreateTab2 />,
    },
    {
      key: '11',
      label: '插画元素',
      contant: <CreateTab3 />,
    }
  ];
  //弹框

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  //自定义指令
  const Customize = () => {
    setIsModalOpen(true);
  }

  //tab切话
  const [keys, setKeys] = useState('0')
  const onChange1 = (key: string) => {
    console.log(key);
    setKeys(key)
  };

  //创建设计
  const createDesign=()=>{
    navigate('../../createtemplate')
  }

  const dianji = (message: string) => {
    console.log(message);
  }

  const itemstab = [
    {
      key: '0',
      label: 'PC端',
      // contant: <ModuleTab1 tabitem1={tabitem1} eventparent={dianji} />,
      contant: <ModuleTab1 tabitem1={tabitem1} />,
    },
    {
      key: '1',
      label: '移动端',
      contant: <ModuleTab1 tabitem1={tabitem2} />,
    },
    {
      key: '2',
      label: '印刷',
      contant: <ModuleTab1 tabitem1={tabitem3} />,
    },
  ];

  return (
    <div className={style.box}>
      <div className={style.top}>
        <h2>
          创建设计
        </h2>
        <button className={style.btn} onClick={Customize}>自定义尺寸</button>
      </div>
      {/* tab切换 */}
      <div className={style.tab}>
        <Tabs defaultActiveKey={activeKey} items={items} onChange={onChange} tabBarStyle={{ marginRight: '20px' }} />
      </div>
      <div className={style.tabmain}>
        {items.map((tab: any, index: any) => (
          <div
            key={index}
            style={{
              display: activeKey == index ? 'block' : 'none',
            }}
          >
            {tab.contant}
          </div>
        ))}
      </div>
      <div>
        {/* 弹框 */}
        <Modal title="自定义尺寸" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={'800px'} style={{ top: '200px', left: '100px' }}>
          <div className={style.module}>
            <input type="text" placeholder='宽' value={value} onChange={huan} /> X
            <input type="text" placeholder='高' value={value1} onChange={huan1} />
            <select name="" id="">
              <option>px</option>
              <option>cm(厘米)</option>
              <option>mm(毫米)</option>
            </select>
            <button className={disabled ? style.btn : style.btn1} disabled={disabled} onClick={createDesign}>创建设计</button>
          </div>
          {
            bool ? <div className={style.prompt}>*尺寸范围为40px * 10000px</div> : ''
          }
          <div className={style.tab}>
            <Tabs defaultActiveKey={keys} items={itemstab} onChange={onChange1} />
          </div>
          {/* 弹框tab切换 */}
          <div>
            {
              itemstab.map((item: any, index: any) => (
                <div
                  key={index}
                  style={{
                    display: keys == index ? 'block' : 'none',
                  }}
                >
                  {item.contant}
                </div>
              ))
            }
          </div>
          <div className={style.view}>
            <h3>常用场景</h3>
            <div className={style.main}>
              {
                favoriterimg3.map((item:any, index:number) => {
                  return <li className={style.li} key={index}>
                    <div className={style.picture}>
                      <img src={item.img} alt="" />
                    </div>
                    <div>
                      <div className={style.title}>{item.title}</div>
                      <div className={style.size}>{item.size}</div>
                    </div>
                  </li>
                })
              }
            </div>
          </div>
        </Modal>
      </div>
      {/* 右下角 */}
      <BottomRight></BottomRight>
    </div>
  )
}

export default Index
